﻿
@{
    ViewBag.Title = "HomePage1";
    Layout = "~/Views/Shared/CinemaLayoutPage.cshtml";
}
@using Cinema_Ticketing_System.Models;

@section styles{
    <style>
        #adv div {
            background-color: orange;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        #adv div a {
            color: white;
            font-size: 1px;
        }

        a {
           text-decoration: none;
        }
        #dianyingyuanming {
            width:230px;
            height:100px;
            overflow:scroll;
            margin-top :3px;
/*            border:1px solid black;*/
        }
        #area{
           
            width:200px;
        }
        #dianyingmain{
            margin-top :10px;
        }
        #onebox>div>div{
            width:150px;
            height:180px;
            object-fit:cover;
        }
        #onebox img {
            width: 100%;
            height: 100%;
        }
        #onebox > div > .filmname1 {
            width: 150px;
            height: 20px;
            text-align: center;
            color: red;
        }
        #twobox > div > div {
            width: 150px;
            height: 180px;
            object-fit: cover;
        }
        #twobox > div > .filmname1{
            width:150px;
            height:20px;
            text-align:center;
            color:red;
        }
        #twobox img {
            width: 100%;
            height: 100%;
        }

        .jijianggengduo{
            margin-top:20px;
            margin-bottom:20px;
        }
        /*广告大小的确定*/
        #guanggao {
            width: 1150px;
            height: 100px;
            object-fit: cover;
        }
        #guanggao img{
            width:100%;
            height:100%;
        }
        #filmn {
            width: 150px;
            height: 20px;
            text-align: center;
            color: red;
        }
    </style>
}

<from class="form-horizontal">
    <div class="col-lg-12" id="dianyingmain">
        <div class="col-lg-3">
            <div class="col-lg-12">
                <select name="area" class="form-control" id="area">
                    <option value="-99">--请选择--</option>
                    @*地区下拉列表动态生成*@
                    @foreach (var item in ViewBag.lsitarea as List<area_table>)
                    {
                        <option value="@item.areaid" id="areax">@item.areaname</option>
                    }
                </select>
            </div>
            <div class="col-lg-12" id="dianyingyuanming">
                @*电影院信息动态生成*@
                @foreach (var item in ViewBag.listname)
                {
                    <div>@item.cinemaname;</div>
                }
            </div>
            <div class="col-lg-12"><img src="" /></div>
        </div>
        <div class="col-lg-5">
            <img src="~/imgs/19dbbdc52057e722a4c6d76a788fc417.jpg" style="width:450px;height:200px"/>
        </div>
        <div class="col-lg-4" id="adv">
            <div class="col-lg-5"><a href="#">办卡即送电影票</a></div>
            <div class="col-lg-5"><a href="#">卖座电影APP下载</a></div>
            <div class="col-lg-5"><a href="#">卖座网专题汇总</a></div>
            <div class="col-lg-5"><a href="#">农行信用卡看大片</a></div>
        </div>
        <div><img src="~/imgs/545e664064058974.jpg" style="width:350px;height:160px"/></div>
    </div>
    <div class="col-lg-12 jijianggengduo">
        <div class="col-lg-10"><a href="#">正在上映</a></div>
        <div class="col-lg-2"><a href="#">更多电影>></a></div>
    </div>
    <div class="col-lg-12" id="onebox">
        @foreach (var item in ViewBag.listshowfilm)
        {
            <div class="col-lg-2">
                <div><img src="~/imgs/@item.cover" /></div>
                <div class="filmname1">@item.filmname</div>
            </div>
        }
    </div>
    <div class="col-lg-12">
        <div></div>
        <div id="one"><a href="#" id="first">第一页</a><a href="#" id="up">上一页</a><a href="#" id="down">下一页</a><a href="#" id="last">尾页</a></div>
    </div>
    @*广告页面*@
    <div class="col-lg-12" id="guanggao"><img src="~/imgs/d7601331306cdcb9.jpg"/></div>
    <div class="col-lg-12 jijianggengduo">
        <div class="col-lg-10"><a href="#">即将上映</a></div>
        <div class="col-lg-2"><a href="#">更多电影>></a></div>
    </div>
    <div class="col-lg-12" id="twobox">
        @foreach (var item in ViewBag.listunreleasedfilm)
        {
            <div class="col-lg-2">
                <div><img src="~/imgs/@item.cover" /></div>
                <div class="filmname1">@item.filmname</div>
            </div>
        }
    </div>
    <div class="col-lg-12">
        <div></div>
        <div id="two"><a href="#" id="first">第一页</a><a href="#" id="up">上一页</a><a href="#" id="down">下一页</a><a href="#" id="last">尾页</a></div>
    </div>
    <div class="col-lg-12" style="display:none">
        <ul id="ul1">
            @for (var i = 0; i <= ViewBag.pageNum; i++)
            {
                <li class="active">@i</li>
            }
        </ul>
        <ul id="ul2">
            @for (var i = 0; i <= ViewBag.pageNum2; i++)
            {
                <li class="active">@i</li>
            }
        </ul>
    </div>
</from>


@section scripts
{
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script>
        $(function () {

            $("#area").change(function (e) {
                var areax = $("#area").val()
                $.ajax({
                    url: '/HomePage/HomePage',
                    type: 'GET',
                    data: { "requestStatus": 5,  "area": areax },
                    success: function (dataarea) {
                        createRow3(dataarea);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })
            })

            function createRow3(dataarea) {
                $('#dianyingyuanming div').remove();
                $.each(dataarea, function (i, item) {
                    var $div = $(`
                                <option value="${item.cinemaid}" id="areax">${item.cinemaname}</option>
                                `);
                    $('#dianyingyuanming').append($div);
                })

            }







            var x = $("#ul1 li:last-child").text();
            var pageIndex = 1;

            $('#one a:first-child').click(function () {
                pageIndex = 1
                $.ajax({
                    url: '/HomePage/HomePage',
                    type: 'GET',
                    data: { "requestStatus": 1, "pageIndex": pageIndex, },
                    success: function (data) {
                        createRow(data);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })

            })

            $("#one a:nth-child(2)").click(function () {
                if (pageIndex > 1) {
                    pageIndex = pageIndex - 1
                    $.ajax({
                        url: '/HomePage/HomePage',
                        type: 'GET',
                        data: { "requestStatus": 1, "pageIndex": pageIndex, },
                        success: function (data) {
                            createRow(data);
                        },
                        error: function () {
                            alert('Request Error');
                        }
                    })
                }

            })

            $("#one a:nth-child(3)").click(function () {
                if (pageIndex < x) {
                    pageIndex = pageIndex + 1
                    $.ajax({
                        url: '/HomePage/HomePage',
                        type: 'GET',
                        data: { "requestStatus": 1, "pageIndex": pageIndex, },
                        success: function (data) {
                            createRow(data);
                        },
                        error: function () {
                            alert('Request Error');
                        }
                    })
                }

            })


            $("#one a:last-child").click(function () {
                pageIndex = x
                $.ajax({
                    url: '/HomePage/HomePage',
                    type: 'GET',
                    data: { "requestStatus": 1, "pageIndex": pageIndex, },
                    success: function (data) {
                        createRow(data);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })
            })






            var x2 = $("#ul2 li:last-child").text()
            var pageIndex2 = 1
            $('#two a:first-child').click(function () {
                pageIndex2 = 1
                $.ajax({
                    url: '/HomePage/HomePage',
                    type: 'GET',
                    data: { "requestStatus": 2, "pageIndex": pageIndex2, },
                    success: function (data2) {
                        createRow2(data2);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })

            })

            $("#two a:nth-child(2)").click(function () {

                if (pageIndex2 > 1) {
                    pageIndex2 = pageIndex2 - 1
                    $.ajax({
                        url: '/HomePage/HomePage',
                        type: 'GET',
                        data: { "requestStatus": 2, "pageIndex": pageIndex2, },
                        success: function (data2) {
                            createRow2(data2);
                        },
                        error: function () {
                            alert('Request Error');
                        }
                    })
                }

            })

            $("#two a:nth-child(3)").click(function () {
                if (pageIndex2 < x2) {
                    pageIndex2 = pageIndex2 + 1
                    $.ajax({
                        url: '/HomePage/HomePage',
                        type: 'GET',
                        data: { "requestStatus": 2, "pageIndex": pageIndex2, },
                        success: function (data2) {
                            createRow2(data2);
                        },
                        error: function () {
                            alert('Request Error');
                        }
                    })
                }

            })


            $("#two a:last-child").click(function () {
                pageIndex2 = x2
                $.ajax({
                    url: '/HomePage/HomePage',
                    type: 'GET',
                    data: { "requestStatus": 2, "pageIndex": pageIndex2, },
                    success: function (data2) {
                        createRow2(data2);
                    },
                    error: function () {
                        alert('Request Error');
                    }
                })
            })

            function createRow2(data2) {
                $('#twobox div').remove();
                $.each(data2, function (i, item) {
                    var $div = $(`
                                <div class="col-lg-2">
                                    <div><img src="/imgs/${item.cover}" /></div>
                                    <div id="filmn">${item.filmname}</div>
                                </div>
                                `);
                    $('#twobox').append($div);
                })
            }

            function createRow(data) {
                $('#onebox div').remove();
                $.each(data, function (i, item) {
                    var $div = $(`
                                <div class="col-lg-2">
                                    <div><img src="/imgs/${item.cover}" /></div>
                                    <div id="filmn">${item.filmname}</div>
                                </div>
                                `);
                    $('#onebox').append($div);
                })

            }
        })
    </script>

}